<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="20">
          <div>
            <el-button type="success" @click="addFn('已审核')">
              <el-icon>
                <Plus />
              </el-icon>&nbsp;批量同意
            </el-button>
            <el-button type="danger" @click="addFn('未补签')">
              <el-icon>
                <Minus />
              </el-icon>&nbsp;批量驳回
            </el-button>
          </div>
          <el-card style="width: 1400px" shadow="hover">
            <el-table :data="tableData" @selection-change="selectable" :border="true" stripe
              style="width: 100%; height: 527px;">
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column prop="username" label="姓名" width="130" style="height: 50px !important;" align="center" />
              <el-table-column prop="date" label="日期" width="150" align="center" />
              <el-table-column prop="checkInTime" label="上班时间" width="150" align="center" />
              <el-table-column prop="checkOutTime" label="下班时间" width="150" align="center" />
              <el-table-column prop="reason" label="异常原因" width="150" align="center" />
              <el-table-column prop="status" label="状态" width="150" align="center" />
              <el-table-column prop="auditorName" label="审核人" width="150" align="center" />
              <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                  <el-button type="success" @click="addFn1([scope.row.id], '已审核')">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;同意
                  </el-button>
                  <el-button type="danger" @click="addFn1([scope.row.id], '未补签')">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;驳回
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="clockPage.pageNum" v-model:page-size="clockPage.pageSize"
              :disabled="false" layout="prev, pager, next, jumper, total" :total="allTotal"
              @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Refresh, Plus, Minus, } from '@element-plus/icons-vue'
import TagComtent from '@/components/TagComtent.vue'
import { ElTable } from 'element-plus'
import HeadContent from '@/components/HeadContent.vue'
import type { Agree, ClockPage, NotClock } from '@/model'
import { add, notClock } from '@/api/clock'


const agree = ref<Agree>({
  ids: [],
  status: ''
})
const selectList = ref<number[]>([])
const selectable = (row: any) => {
  selectList.value = row
}
// 已审核 未补签 - 批量
const addFn = async (status: string) => {
  agree.value.ids = selectList.value.map((item: any) => item.id)
  agree.value.status = status
  await add(agree.value)
  notClockFn()
}
// 已审核 未补签
const addFn1 = async (ids: number[], status: string) => {
  agree.value.ids = ids
  agree.value.status = status
  await add(agree.value)
  notClockFn()
}
// 分页查询
const allTotal = ref(0)
const tableData = ref<NotClock[]>([])
const clockPage = ref<ClockPage>({
  status: '待审核',
  pageNum: 1,
  pageSize: 10
})
const notClockFn = async () => {
  const res = await notClock(clockPage.value)
  console.log(res.data);
  tableData.value = res.data.records
  allTotal.value = res.data.total
}
notClockFn()

// 点击页码
const handleCurrentChange = (val: number) => {
  clockPage.value.pageNum = val
  notClockFn()
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}
</style>
